<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
    <link type="text/css" rel="stylesheet" href="/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<form class="layui-form" action="">

    <div class="layui-form-item" style="margin-top: 18px">

        <div class="layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="入库时间">
            </div>

            <div class="layui-form-mid">-</div>

            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test2" placeholder="入库时间">
            </div>
        </div>

        <button type="button" id="btn" class="layui-btn" style="margin-top: -4px">默认按钮</button>
    </div>

    <div class="layui-form-item" style="width: 300px;">
        <label class="layui-form-label">事物区域</label>
        <div class="layui-input-block">
            <select name="status" lay-verify="required">
                <option value=""></option>
                <option value="太阳系内事物">太阳系内事物</option>
                <option value="太阳系外事物">太阳系外事物</option>

            </select>
        </div>


    </div>

</form>


<table style="padding-left: 200px" class="layui-hide" id="demo"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="./js/jquery-2.1.4.js"></script>
<script src="./layui.all.js"></script>
<script>

    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });
    });

    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test2'
        });
    });


    layui.use('table', function () {
        var table = layui.table;



        //获取开始时间，结束时间，状态
        var beforeTime = $("#test1").val();
        console.log(typeof beforeTime)
        var afterTime = $("#test2").val();
        console.log(afterTime)
        var status = $("[name='status']").val()
        console.log(status)

        var tableIns = table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , url: 'getinfo'
            , cols: [
                [
                {type: 'space', fixed: 'left'}
                , {field: 'thing_id', width: 100, title: '事物ID', sort: true, unresize: true}
                , {field: 'thing_name', width: 100, title: '事物名称'}
                , {field: 'thing_description', width: 560, title: '事物描述'}
                , {field: 'thing_dothing', width: 250, title: '操作'}
                , {field: 'thing_time', width: 200, title: '入库时间', sort: true}
                , {field: 'thing_statu', width: 120, title: '事物状态', unresize: true, sort: true}
                ,{fixed: 'right', width: 165, title: '操作', align:'center', toolbar: '#barDemo'}
                ]
            ]
            , page: true
            , limits: [5, 10]
            , limit: 5
            ,toolbar: 'default'
            ,where:{"beforeTime":beforeTime,"afterTime":afterTime,"status":status}
        });


        $("#btn").click(function () {
            //获取开始时间，结束时间，状态
            var beforeTime = $("#test1").val();
            console.log(typeof beforeTime)
            var afterTime = $("#test2").val();
            console.log(afterTime)
            var status = $("[name='status']").val()
            console.log(status)

            tableIns.reload({
                where:{"beforeTime":beforeTime,"afterTime":afterTime,"status":status}
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });


            // $.ajax({
            //     type:"get",
            //     url:"selectpatient",
            //     dataType:"json",
            //     data:{"beforeTime":beforeTime,"afterTime":afterTime,"status":status,"page":1,"limit":5},
            //     success:function (data) {
            //         console.log(data)
            //     }
            // })

        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });
    });
</script>
</body>
</html>